import React from 'react';
import styles from './style';
import {TouchableOpacity, Text, Image, View} from 'react-native';
import * as Animatable from 'react-native-animatable';
import ListImg from '../../../../common/component/listImg';

const avatar = {
  uri:
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-16898564e0a7dfb0eb1f2072dae62f3f_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613130485&t=9adfc5111d4292e9d98bad6d928eaa0f',
};
const edit = require('../../img/edit.png');
const midButton = [
  {img: require('../../img/down.png'), tag: '历史下载', url: 'DownLoad'},
  {img: require('../../img/rew.png'), tag: '审核进度', url: 'Review'},
  {img: require('../../img/service.png'), tag: '帮助反馈', url: 'Help'},
  {img: require('../../img/set.png'), tag: '设置中心', url: 'Setting'},
];
const ca = require('../../img/ca.png');
const he = require('../../img/he.png');
const add = require('../../img/add.png');
export default class Mine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tagList: [
        {id: '1', num: 97, tag: '人气'},
        {id: '2', num: 635, tag: '粉丝'},
        {id: '3', num: 58, tag: '关注'},
      ],
      typeTitle: '我的作品',
      typeIcon: he,
    };
  }
  item(val) {
    return (
      <View key={val.id}>
        {/* 判断是人气还是粉丝 */}
        {val.id == 1 ? (
          <TouchableOpacity
            style={styles.tag}
            activeOpacity={0.6}
            key={val.tag}
            onPress={() =>
              this.props.navigation.navigate('Fans', {
                title: val.id == 2 ? '我的粉丝' : '我关注的',
              })
            }>
            <Text style={styles.num}>{val.num}</Text>
            <Text style={styles.tagName}>{val.tag}</Text>
          </TouchableOpacity>
        ) : (
          <View style={styles.tag}>
            <Text style={styles.num}>{val.num}</Text>
            <Text style={styles.tagName}>{val.tag}</Text>
          </View>
        )}
      </View>
    );
  }
  button(val) {
    return (
      <TouchableOpacity
        style={styles.midButton}
        activeOpacity={0.6}
        key={val.tag}
        onPress={() => this.props.navigation.navigate(val.url)}>
        <Image source={val.img} style={styles.midButtonImg} />
        <Text style={styles.midButtonTag}>{val.tag}</Text>
      </TouchableOpacity>
    );
  }
  handleViewRef(ref) {
    this.view = ref;
  }
  changeType() {
    this.view.rubberBand();
    let typeTitle =
      this.state.typeTitle === '我的作品' ? '我喜欢的' : '我的作品';
    let typeIcon = this.state.typeIcon === he ? ca : he;
    this.setState({
      typeTitle,
      typeIcon,
    });
  }
  render() {
    let {navigation} = this.props;
    let {tagList, typeIcon, typeTitle} = this.state;
    return (
      <>
        <View style={styles.container}>
          <Animatable.View style={styles.topContainer} animation="slideInDown">
            <View style={styles.topLeft}>
              <Text style={styles.name}>帅的一批</Text>
              <Text style={styles.sing}>每天起床一件事，先为自己打个气！</Text>
              <View style={styles.tagList}>
                {tagList.map((val) => this.item(val))}
              </View>
            </View>
            <TouchableOpacity
              onPress={() => {
                console.log('跳转到编辑个人资料');
                navigation.navigate('MineInfo');
              }}
              style={styles.avatarContainer}
              activeOpacity={0.6}>
              <Image source={avatar} style={styles.avatar} />
              <Image source={edit} style={styles.edit} />
            </TouchableOpacity>
          </Animatable.View>
          <View style={styles.midContainer}>
            {midButton.map((val) => this.button(val))}
          </View>

          <View style={styles.bottomBtnContainer}>
            <View style={styles.typeContainer}>
              <Animatable.View
                style={styles.typeNameContainer}
                ref={(ref) => this.handleViewRef(ref)}>
                <Text style={styles.typeName}>{typeTitle}</Text>
              </Animatable.View>
              <TouchableOpacity
                style={styles.typeIconContainer}
                onPress={() => this.changeType()}>
                <Image style={styles.typeIcon} source={typeIcon} />
              </TouchableOpacity>
            </View>
            <TouchableOpacity
              style={styles.addIconContainer}
              onPress={() => navigation.navigate('AddImg')}>
              <Image style={styles.add} source={add} />
            </TouchableOpacity>
          </View>
          <ListImg navigation={navigation} selfStatus />
        </View>
      </>
    );
  }
}
